<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<ng-container *tdLoading="'processingFeed'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">

  <td-layout-nav color="none">
    <div td-toolbar-content fxLayout="row" fxLayoutAlign="start end" fxFlex="">
      <div fxLayout="row" fxLayoutAlign="start center" class="cursor-pointer" (click)="goBack()">
        <span [translate] fxFlex="" class="text-truncate">views.define-feed.Sat</span>
      </div>
      <span fxFlex></span>
      <div class="import-button pad-right-md" *ngIf="allowImport">
        <button mat-button (click)="gotoImportFeed()">
          <mat-icon color="primary">add_circle_outline</mat-icon>
          <span class="text-caps" translate>views.define-feed.import</span>
        </button>
      </div>
    </div>
    <div style="min-height: 300px">
      <div fxLayout="column" *ngIf="favorites.length >0">
        <h4 mat-subheader class="pad-none push push-bottom-sm tc-grey-800">Favorites</h4>
        <ng-container [ngTemplateOutlet]="templateCards"
                      [ngTemplateOutletContext]="{$implicit:favorites, isFavorite:true}">
        </ng-container>
      </div>


      <div fxLayout="column">
        <h4 mat-subheader class="pad-none push push-bottom-sm tc-grey-800">All Templates</h4>
        <ng-container [ngTemplateOutlet]="templateCards"
                      [ngTemplateOutletContext]="{$implicit:allTemplates, isFavorite:false}">
        </ng-container>
      </div>


    </div>

    <ng-template #templateCards let-templates let-isFavorite="isFavorite">
      <div fxLayout="row wrap" fxLayoutAlign="start start" tdMediaToggle="gt-xs" [mediaClasses]="['push-left-xxl','push-right-xxl']">
        <ng-template let-template let-index="index" let-last="last" ngFor [ngForOf]="templates">
          <div [id]="template.templateName">

            <mat-card fxFlex fxLayout="row" class="kylo-card-template pad-none cursor-pointer" (click)="selectTemplate(template)">

              <div fxLayout="column" [style.background]="template.iconColor" fxLayoutAlign="center center" fxFlex="20">
                <ng-md-icon [icon]="template.icon" size="40" class="kylo-card-icon"></ng-md-icon>
              </div>
              <div fxLayout="column" fxFlex>
                <mat-card-content fxFlex class="kylo-content-template">

                  <div class="kylo-card-title push-bottom-sm">{{template.templateName}}</div>
                  <div [matTooltip]="template.description"
                       matTooltipShowDelay="1000" class="kylo-card-subtitle tc-grey-600 block-with-text">
                    {{template.description}}
                  </div>

                </mat-card-content>
                <mat-divider inset></mat-divider>
                <mat-card-actions fxLayoutAlign="end" class="tc-grey-700 push-left-none" style="margin-top:-10px">
                  <button mat-icon-button class="kylo-icon-button" (click)="removeFavorite($event,template)" *ngIf="isFavorite">
                    <mat-icon>favorite</mat-icon>
                  </button>
                  <button mat-icon-button class="kylo-icon-button" (click)="makeFavorite($event,template)" *ngIf="!isFavorite">
                    <mat-icon>favorite_border</mat-icon>
                  </button>
                  <button mat-icon-button class="kylo-icon-button">
                    <mat-icon>open_in_new</mat-icon>
                  </button>
                </mat-card-actions>
              </div>


            </mat-card>
          </div>
        </ng-template>
        <div fxFlex=""></div>
      </div>
    </ng-template>

  </td-layout-nav>
</ng-container>